<template>
	<view>
		<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
		</uni-ec-canvas>
	</view>
</template>
 
<script>
	import uniEcCanvas from '../../components/uni-ec-canvas.vue'
	import * as echarts from '../../components/echarts.js'
	import request from '../../utils/request.js'
	let chart = null
	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				date: [],
				count: [],
				ec: {
					lazyLoad: true
				},
				option: {
					backgroundColor: '#55aaff',
					grid: {
						left: '10%',
						top: '15%',
						bottom: '12%',
						right: '10%',
					},
					legend: {
						data: ['本周查询次数'],
					},
					xAxis: {
						type: 'category',
						data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							name: '本周查询次数',
							type: 'line',
							data: [0, 1, 6, 3, 2, 8, 5],
							itemStyle: {
								normal: {
									color: '#00f8ff'
								}
							}
						},
						// 其他路线数据...
					]
				}
			}
		},
		methods: {
			initChart(canvas, width, height, canvasDpr) {
				console.log(canvas, width, height, canvasDpr)
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				chart.setOption(this.option)
				return chart
			},
		},
		async onLoad() {
			await request.get('/wx/QueryTrends').then(res => {
				console.log(res.data)
				res.data.data.forEach(item => {
					this.date.push(item.dat.slice(5, 10))
					this.count.push(item.cout)
				})
				console.log(this.date);
			})
			this.option.xAxis.data = this.date
			this.option.series.data = this.count
			setTimeout(() => {
				console.log(this.$refs)
			}, 2000)
			this.$refs.canvas.init(this.initChart)
		},
		async mounted(){
			
		}
	}
</script>
 
// 这里一定要注意 设置该组件宽高 以及display:block来确保canvas初始化的时候是有宽高的
<style>
	.uni-ec-canvas {
		width: 100%;
		height: 500rpx;
		display: block;
		margin-top: 30rpx;
	}
</style>